<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue File Upload</title>

   <!-- 使用 unpkg CDN 引入 Vue -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  
    <!-- 使用 unpkg CDN 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.8/lib/theme-chalk/index.css">
    
    <!-- 使用 unpkg CDN 引入 Element UI JS -->
    <script src="https://unpkg.com/element-ui@2.15.8/lib/index.js"></script>
  
    <!-- 使用 unpkg CDN 引入 Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <style scoped>
    .upload-demo i {
      font-size: 24px;
    }

    .file-list {
      margin-top: 20px;
    }

    .file-item {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .el-upload__tip {
      color: #f56c6c;
    }

    .el-button {
      font-size: 12px;
    }

    .el-progress {
      width: 100%;
      margin-top: 5px;
    }
  </style>
</head>
<body>

  <div id="app">
    <el-upload
      ref="upload"
      class="upload-demo"
      action="http://localhost:5000/data"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-progress="handleProgress"
      :limit="10"
      :accept="'.doc,.docx'"
      multiple
      list-type="text"
    >
      <el-button slot="trigger" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传 Word 文件，且大小不超过 10MB</div>
    </el-upload>

    <div v-if="fileList.length" class="file-list">
      <div v-for="(file, index) in fileList" :key="file.uid" class="file-item">
        <span :style="{ color: file.status === 'success' ? 'blue' : 'black' }">{{ file.name }}</span>
        <el-button
          v-if="file.status === 'success' || file.status === 'fail'"
          size="mini"
          type="text"
          @click="handleRemove(file)"
        >删除</el-button>
        <el-button
          v-if="file.status === 'fail'"
          size="mini"
          type="text"
          @click="handleReupload(file)"
        >重新上传</el-button>

        <el-progress
          v-if="file.status === 'uploading' || file.status === 'fail'"
          :percentage="file.percentage"
          :status="file.status === 'fail' ? 'exception' : 'active'"
          :color="file.status === 'uploading' ? 'blue' : 'red'"
          :stroke-width="8"
        />
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          fileList: [], // 文件列表
        };
      },
      methods: {
        // 检查文件格式和大小
        beforeUpload(file) {
          const isWord = /^(application\/msword|application\/vnd.openxmlformats-officedocument.wordprocessingml.document)$/i.test(file.type);
          const isLt10M = file.size / 1024 / 1024 < 10;

          if (!isWord) {
            this.$message.error('上传文件只能是 Word 文件');
          }
          if (!isLt10M) {
            this.$message.error('上传文件大小不能超过 10MB');
          }

          return isWord && isLt10M;
        },
        
        // 处理上传成功
        handleSuccess(response, file, fileList) {
          file.status = 'success';
          file.link = response.data.link;  // 假设接口返回了文件链接
          this.$message.success(`${file.name} 上传成功`);
        },

        // 处理上传失败
        handleError(err, file, fileList) {
          file.status = 'fail';
          this.$message.error(`${file.name} 上传失败`);
        },

        // 处理上传进度
        handleProgress(event, file, fileList) {
          file.status = 'uploading';
          file.percentage = Math.round((event.loaded / event.total) * 100);
        },

        // 删除文件
        handleRemove(file) {
          const index = this.fileList.indexOf(file);
          if (index > -1) {
            this.fileList.splice(index, 1);
          }
        },

        // 预览文件
        handlePreview(file) {
          console.log('预览', file);
        },

        // 重新上传失败的文件
        handleReupload(file) {
          file.status = 'uploading'; // 改为上传中状态
          this.$refs.upload.upload(file); // 重新上传文件
        },
      },
    });
  </script>

</body>
</html>
